<nz-breadcrumb nz-page-header-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="'/admin/home'">
      <span nz-icon nzType="home"></span>&nbsp;首页</a
    >
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>用户</nz-breadcrumb-item>
</nz-breadcrumb>
<nz-content>
  <div class="user-content">
    <div class="user-title">用户管理</div>
    <div class="user-search">
      <div nz-row [nzGutter]="10" #searchElement>
        <div nz-col [nzSpan]="searchSpan" [class.hidden]="!showInfo.account">
          <nz-form-item>
            <nz-form-control>
              <input
                nz-input
                [(ngModel)]="searchInfo.account"
                id="name"
                placeholder="用户账户/ID/手机号"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="searchSpan" [class.hidden]="!showInfo.grade">
          <nz-form-item>
            <nz-form-control>
              <nz-select
                [(ngModel)]="searchInfo.grade"
                nzPlaceHolder="会员等级"
                nzAllowClear
              >
                <nz-option nzValue="0" nzLabel="青铜会员"></nz-option>
                <nz-option nzValue="1" nzLabel="白银会员"></nz-option>
                <nz-option nzValue="2" nzLabel="黄金会员"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="searchSpan" [class.hidden]="!showInfo.tag">
          <nz-form-item>
            <nz-form-control>
              <nz-select
                [(ngModel)]="searchInfo.tag"
                nzPlaceHolder="用户标签"
                nzAllowClear
              >
                <nz-option nzValue="0" nzLabel="关闭"></nz-option>
                <nz-option nzValue="1" nzLabel="正常"></nz-option>
                <nz-option nzValue="2" nzLabel="运行"></nz-option>
                <nz-option nzValue="3" nzLabel="异常"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="searchSpan" [class.hidden]="!showInfo.from">
          <nz-form-item>
            <nz-form-control>
              <nz-select
                [(ngModel)]="searchInfo.from"
                nzPlaceHolder="注册渠道"
                nzAllowClear
              >
                <nz-option nzValue="0" nzLabel="官网注册"></nz-option>
                <nz-option nzValue="1" nzLabel="手机注册"></nz-option>
                <nz-option nzValue="2" nzLabel="线下注册"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="searchSpan" [class.hidden]="!showInfo.time">
          <nz-form-item>
            <nz-form-control>
              <nz-date-picker
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                [(ngModel)]="searchInfo.time"
                nzPlaceHolder="注册时间"
              ></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col [nzSpan]="searchSpan" [nzOffset]="expandedOffset">
          <button nz-button nzType="primary" class="user-btn">
            <span nz-icon nzType="search" class="mr-5"></span>查询
          </button>
          <button nz-button class="user-btn">
            <span nz-icon nzType="redo" class="mr-5"></span>重置
          </button>
          <a class="user-gj">
            <i [class.expanded]="expanded" nz-icon nzType="down" nzTheme="outline" class="expanded-icon"></i>
            <span>筛选</span>
          </a>
        </div>
      </div>
    </div>
    <div class="user-table">
      <nz-table [nzShowPagination]="false" nzBordered="true"
      [nzPageSize]="pageSize" class="mt20">
      <thead>
        <tr>
          <th [nzChecked]="checked" [nzIndeterminate]="indeterminate"></th>
          <ng-container *ngFor="let th of thOfData">
            <ng-container *ngIf="th.checked">
              <ng-container [ngSwitch]="th.key">
                <th *ngSwitchCase="'num'" nzShowSort nzColumnKey="num" [nzSortFn]="true">ID编号</th>
                <th *ngSwitchCase="'account'">用户账户</th>
                <th *ngSwitchCase="'grade'" nzShowSort nzColumnKey="num" [nzSortFn]="true">会员等级</th>
                <th *ngSwitchCase="'tag'" nzShowSort nzColumnKey="num" [nzSortFn]="true">用户状态</th>
                <th *ngSwitchCase="'edit'">操作</th>
              </ng-container>
            </ng-container>
          </ng-container>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of tableData" [class.selected]="setOfCheckedId.has(data.id)">
          <td [nzChecked]="setOfCheckedId.has(data.id)" ></td>
          <ng-container *ngFor="let th of thOfData">
            <ng-container *ngIf="th.checked">
              <ng-container [ngSwitch]="th.key">
                <td *ngSwitchCase="'num'">{{ data.num }}</td>
                <td *ngSwitchCase="'account'">{{ data.account }}</td>
                <td *ngSwitchCase="'grade'">
                  <ng-container [ngSwitch]="data.grade">
                    <span *ngSwitchCase="0">青铜会员</span>
                    <span *ngSwitchCase="1">白银会员</span>
                    <span *ngSwitchCase="2">黄金会员</span>
                  </ng-container>
                </td>
                <td *ngSwitchCase="'tag'">
                  <ng-container [ngSwitch]="data.tag">
                    <nz-badge *ngSwitchCase="0" nzStatus="default" nzText="关闭"></nz-badge>
                    <nz-badge *ngSwitchCase="1" nzStatus="success" nzText="正常"></nz-badge>
                    <nz-badge *ngSwitchCase="2" nzStatus="processing" nzText="运行"></nz-badge>
                    <nz-badge *ngSwitchCase="3" nzStatus="error" nzText="异常"></nz-badge>
                  </ng-container>
                </td>
                <td *ngSwitchCase="'edit'">
                  <a>详情</a>
                  <nz-divider nzType="vertical"></nz-divider>
                  <a>编辑</a>
                  <nz-divider nzType="vertical"></nz-divider>
                  <a>删除</a>
                </td>
              </ng-container>
            </ng-container>
          </ng-container>
        </tr>
      </tbody>
    </nz-table>
    </div>
  </div>
</nz-content>
